<template>
<div class="sector">
    <el-form ref="addUserData" :rules="rules" :model="addUserData" label-width="140px" size="medium">
        <el-form-item label="Account 账户" prop="account">
            <el-input v-model="addUserData.account"></el-input>
        </el-form-item>
        <el-form-item label="Password 密码" prop="password">
            <el-input v-model="addUserData.password"></el-input>
        </el-form-item>
        <el-form-item label="Phone 手机号" prop="phone">
            <el-input v-model="addUserData.phone"></el-input>
        </el-form-item>
        <el-form-item label="RealName 真名" prop="realName">
            <el-input v-model="addUserData.realName"></el-input>
        </el-form-item>
        <el-form-item label="Role 用户组" prop="role">
            <el-radio-group v-model="addUserData.role">
                <el-radio border v-model="addUserData.role" label="2">出租方（车主）</el-radio>
                <el-radio border v-model="addUserData.role" label="1">求租方（穷逼）</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item>
            <el-upload class="avatar-uploader" action="http://192.168.7.61:4800/users/uploadUserAvatar" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :headers="headers">
                <img v-if="addUserData.avatar" :src="'http://192.168.7.61:4800/temp/' + addUserData.avatar" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item size="large">
            <el-button type="primary" @click="submitHandler('addUserData')">立即新增</el-button>
            <el-button @click="resetForm('addUserData')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
import {
    createNamespacedHelpers
} from "vuex";
const {
    mapActions
} = createNamespacedHelpers("user");
const {
    mapMutations
} = createNamespacedHelpers("publicStore");
export default {
    data() {
        return {
            addUserData: {
                account: "",
                password: "",
                role: 0,
                avatar: "default.jpg",
                realName: "",
                phone: "",
            },
            rules: {
                account: [{
                        required: true,
                        message: "请输入账户名称",
                        trigger: "blur",
                    },
                    {
                        min: 3,
                        max: 18,
                        message: "长度在 3 到 18 个字符",
                        trigger: "blur",
                    },
                ],

                password: [{
                    required: true,
                    message: "请输入密码",
                    trigger: "blur",
                }, ],
                role: [{
                    required: true,
                    message: "请选择用户组",
                    trigger: "change",
                }, ],
            },
            headers: {
                Authorization: "Bearer " + localStorage.token,
            },
        };
    },
    methods: {
        ...mapActions(["addUser"]),
        ...mapMutations(["setNowBreadcrumb"]),
        submitHandler(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.submitUserData();
                }
            });
        },
        async submitUserData() {
            let result = await this.addUser(this.addUserData);
            console.info(result)
            if (result.status) {
                this.$notify({
                    title: "提示",
                    message: "添加成功",
                });
                this.addUserData = {
                    account: "",
                    nickName: "",
                    age: "",
                    password: "",
                    permission: 0,
                    avatar: "",
                };
            } else {
                this.$notify({
                    title: "提示",
                    message: "添加失败",
                });
            }
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // onSubmit() {
        //   this.$notify({
        //     title: "提示",
        //     message: "添加成功",
        //   });
        // },
        handleAvatarSuccess(res, file) {
            if (res.status) {
                this.addUserData.avatar = res.data;
            }
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isLt20M = file.size / 1024 / 1024 < 20;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt20M) {
                this.$message.error("上传头像图片大小不能超过 20MB!");
            }
            return isJPG && isLt20M;
        },
    },
    created() {
        // this.setNowBreadcrumb("adduser");
    },
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/public/sector.scss";

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
